<template>
    <div class="home-header" :class="[showHeader]">
        <div class="home-header-left" :class="[showCity]" @click="handleCity()">
            {{this.$store.state.city}}
        </div>
        <div class="home-header-center" :class="[showSearch]" @click="toSearch">
             景点 | 住宿 | 美食 | 交通
        </div>
        <div class="home-header-right" :class="[showBack]" @click="personPage()">
            <van-icon name="ellipsis" size="25" />
        </div>
    </div>
</template>

<script>
    export default {
        name: "HomeHeader",
        data(){
            return{
                showHeader:'',
                showBack:'',
                showCity:'',
                showSearch:''
            }
        },
        mounted() {
            window.addEventListener('scroll',this.scrollChange)
        },
        methods:{
            personPage(){
                this.$router.push("/person")
                // this.$router.push("/login")
            },
            handleCity(){
              this.$router.push("/homeCity")
            },
            scrollChange(){
                let height = document.documentElement.scrollTop
                if (height > 10){
                    this.showHeader = 'showHeader'
                    this.showCity = 'showCity'
                    this.showBack = 'showBack'
                    this.showSearch = 'showSearch'
                } else {
                    this.showSearch = ''
                    this.showCity = ''
                    this.showBack = ''
                    this.showHeader = ''
                }
            },
            toSearch() {
              this.$router.push("/searchPage")
            }
        }
    }
</script>

<style scoped>
.home-header{
    display: flex;
    justify-content: space-between;
    text-align: center;
    padding-bottom: .2rem;
}

.home-header-left{
    padding-top: 4%;
    padding-left: 3%;
    color: white;
    font-size: 14px;
}
.home-header-right{
    padding-top: 2%;
}

.home-header-center{
    margin-top: 2%;
    padding: 9px 60px;
    border: 1px solid #ffffff;
    border-radius: 20px;
    background-color: #eeeeee;
    opacity: 0.8;
}

.home-header-right{
    padding-right: 3%;
    margin-top: 1%;
    color: white;
}
.showHeader{
    background: #ffffff;
}
.showCity{
    color: #000000;
}
.showSearch{
    color: #000;
    background: #eeeeee;
    font: #aaa;
}
.showBack{
    color: #999999;
}
</style>